<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<html lang="en">
  <head>
	</head>
	<body> 		
		<div ng-controller="UserMessageCtrl">		
      <!-- data-list -->
      <div class="toolbar">
        <div class="btn-group">
          <button type="button" class="btn" ng-click="showRead();" ng-if="'unread'==currentMode"><s:message code="userMessage.func.showRead"></s:message></button>
          <button type="button" class="btn" ng-click="showUnread();" ng-if="'read'==currentMode"><s:message code="userMessage.func.showUnread"></s:message></button>
          <button type="button" class="btn" ng-click="reload();"><i class="icon-refresh"></i> <s:message code="btn.refresh"></s:message></button>       
          <button type="button" class="btn" ng-click="readAll();" ng-if="'unread'==currentMode" title="<s:message code='userMessage.func.readAll'/>"><i class="icon-eye-open"></i></button>   
          <button type="button" class="btn" ng-click="deleteAll();"><i class="icon-trash"></i></button>
        </div>
      </div>	
      <div clas="row-fluid" class="ng-cloak">
        <ul class="inline">
          <li><span class="label" ng-click="filterByModule(['','']);" ng-class="{true: 'label-info', false: 'label-default'}[moduleFilter=='']"><i class="icon-tag"></i> 全部 </span></li>
          <li ng-repeat="moduleName in moduleNames"><span class="label" ng-click="filterByModule(moduleName);" ng-class="{true: 'label-info', false: 'label-default'}[moduleFilter==moduleName[1]]"><i class="icon-tag"></i> {{moduleName[1]}} </span></li>
        </ul>        
      </div>
      <table class="table table-striped table-hover table-condensed table-bordered ng-clock">
        <tbody>
          <tr ng-repeat="userMessage in userMessages | filter: {'i18n.moduleName':moduleFilter}">
            <td style="text-align:center" ng-if="'unread'==currentMode"><a href="javascript:;" class="blue" ng-click="readMessage(userMessage.id, $index)">
                  <i class="icon-check"></i>
                </a></td>
            <td>              
              <span data-ng-bind-html="userMessage.content_html"></span> <span class="label label-info">{{userMessage.i18n.moduleName}}</span>
              <div class="pull-right action-buttons">         
                <small class="text-muted">{{userMessage.createDatetime| moment }}</small> 
                &nbsp;&nbsp;
                <a href="javascript:;" class="red" ng-click="deleteMessage(userMessage.id, $index)">
                  <i class="icon-trash"></i>
                </a>          
              </div>            
            </td>
          </tr>
        </tbody>
      </table>
		</div>    
    <!-- angularjs -->
    <script type="text/javascript" src="${contextPath }/theme/default/js/angular.js"></script>     
		<!--page specific plugin scripts-->				
		<script type="text/javascript">
		$(document).ready(function(){					  
			initAngularjs();
		});	
		
		function UserMessageCtrl($scope, $http, $filter, $sce) {      
      $scope.userMessages = [];
      $scope.moduleNames = [];
      $scope.moduleCodeFilter = "";
      $scope.moduleFilter = "${moduleName}";
      $scope.currentMode = "unread";
      
      $scope.showUnread = function(){
        $http.post("getUnreadMessages.json").success(function(data) {
          $scope.moduleNames = data.moduleNames;
          $scope.userMessages = angular.forEach(data.unreadMessages, function (row) {
            row.content_html = $sce.trustAsHtml(row.content);
          });
          $scope.currentMode = "unread";
          $scope.moduleCodeFilter = "";
          $scope.moduleFilter = "";
        });
      }
      
      $scope.showUnread();
      
      $scope.showRead = function(){
        $http.post("getReadMessages.json").success(function(data) {
          $scope.moduleNames = data.moduleNames;
          $scope.userMessages = angular.forEach(data.readMessages, function (row) {
            row.content_html = $sce.trustAsHtml(row.content);
          });
          $scope.currentMode = "read";
          $scope.moduleCodeFilter = "";
          $scope.moduleFilter = "";
        });
      }     
      
      $scope.reload = function(){
        $scope.showUnread();
      }
            
      $scope.filterByModule = function(moduleName) {
        $scope.moduleCodeFilter = moduleName[0];
        $scope.moduleFilter = moduleName[1];
        
      }
      
      $scope.readMessage = function(id, index) {
        $http.post("read.json", {"id": id}).success(function(data) {
          $scope.userMessages.splice(index, 1);
        });
      }
      
      $scope.deleteMessage = function(id, index) {
        $http.post("delete.json", {"id": id}).success(function(data) {
          $scope.userMessages.splice(index, 1);
        });
      }
      
      $scope.readAll = function() {
        $http.post("readAll.json", {"moduleCode": $scope.moduleCodeFilter}).success(function(data) {
          $scope.userMessages = [];
        });
      }
      
      $scope.deleteAll = function() {
        bootbox.confirm("<s:message code='common.delete.confirm' />", function(result){
          if(result)
          {
            $http.post("deleteAll.json", {"moduleCode": $scope.moduleCodeFilter}).success(function(data) {
              $scope.userMessages = [];
            });
          }  
        });
        
      }
		}  
		</script>			
	</body>
</html>
